﻿Vue.component('partner-pay', {
	data: function () {
		return {
			popVisible: this.visible,
			modelData: this.model,
			paymentMul: false,
			payment: this.paymentlist,
		};
	},
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		vresult: {
			type: Boolean,
			default: false
		},
		vname: {
			type: String
		},
		partialpay: {
			type: Boolean,
			default: false
		},
		model: {
			type: Object
		},
		paymentlist: {
			type: Array
		},
		cashtype: {
			type: String
		},
		balancetype: {
			type: String
		}
	},
	watch: {
		'vresult': function (newVal) {
			if (newVal) {
				this.doSubmit();
			}
		},
		"paymentlist": function (newVal) {
			this.payment = newVal;
		},
		"model": function (newVal) {
			this.modelData = newVal;
		},
		"visible": function (newVal) {
			if (newVal) {
				this.paymentMul = false;
				setTimeout(function () {
					$('.partner-pay').find('.pay-item-icon')[0].click();
				}, 50);
			}
		}
	},
	methods: {
		handleSubmit: function (e) {
			var $form = $(e.currentTarget).parents('form');
			$form.submit();
		},
		doSubmit: function () {
			var _this = this;
			var payments = _this.payment.filter(function (p) {
				return p.selected && p.amount;
			});
			var total = math.bignumber(this.modelData.Total);
			var totalDetail = math.bignumber(0);
			var i;
			for (i = 0; i < payments.length; i++) {
				totalDetail = totalDetail.add(math.bignumber(payments[i].amount || 0));
			}
			var diff = parseFloat(math.format(totalDetail.sub(total), { notation: 'fixed', precision: 2 }));
			if (diff < 0 && !this.partialpay) {
				_this.$emit('complete', { result: 'ERROR', msg: "支付金额不足" });
				return;
			} else if (diff > 0) {
				var cashTypeIndex = payments.findIndex(function (p) {
					/* eslint-disable eqeqeq */
					return p.value == _this.cashtype;
				});
				if (cashTypeIndex < 0) {
					_this.$emit('complete', { result: 'ERROR', msg: "支付金额超过应付金额" });
					return;
				} else {
					if (payments[cashTypeIndex].amount < diff) {
						_this.$emit('complete', { result: 'ERROR', msg: "支付金额超过应付金额" });
						return;
					} else {
						payments[cashTypeIndex].Comment = "实收:" + payments[cashTypeIndex].amount + ";" + payments[cashTypeIndex].tip;
						payments[cashTypeIndex].amount = math.format(math.bignumber(payments[cashTypeIndex].amount).sub(math.bignumber(diff)), { notation: 'fixed', precision: 2 });
					}
				}
			}
			var paramData = Object.assign({}, this.modelData, {
				Details: (payments || []).map(function (p) {
					return {
						RecvWay: p.value,
						Recved: p.amount,
						Comment: p.Comment
					};
				})
			});
			this.$emit('complete', { result: "SUBMIT", model: paramData });
		},
		doCancel: function () {
			this.popVisible = false;
			this.$emit('complete', { result: 'CANCEL' });
		},
		handleFocusPrice: function (e) {
			$(e.currentTarget).select();
		},
		resetPayment: function () {
			var payments = this.payment.map(function (p) {
				return Object.assign({}, p, {
					amount: "",
					selected: false,
					tip: ""
				});
			});
			this.payment = payments;
		},
		handleChangePrice: function (e) {
			this.resetPayment();
		},
		handlePaymentSelect: function (p) {
			var _this = this;
			if (!_this.paymentMul) {
				_this.payment = _this.payment.map(function (v) {
					if (p.value !== v.value) {
						return Object.assign({}, v, {
							selected: false,
							amount: ''
						});
					} else {
						if (v.selected) {
							return v;
						} else {
							return Object.assign({}, v, {
								selected: true,
								amount: _this.modelData.Total
							});
						}
					}
				});
			} else {
				var payments = _this.payment.filter(function (p) {
					return p.selected && p.amount;
				});
				var total = math.bignumber(this.modelData.Total);
				var totalDetail = math.bignumber(0);
				var i;
				for (i = 0; i < payments.length; i++) {
					totalDetail = totalDetail.add(math.bignumber(payments[i].amount || 0));
				}
				var diff = parseFloat(math.format(total.sub(totalDetail), { notation: 'fixed', precision: 2 }));
				_this.payment = _this.payment.map(function (v) {
					if (p.value !== v.value) {
						if (v.amount) {
							return v;
						} else {
							return Object.assign({}, v, {
								selected: false,
								amount: ''
							});
						}
					} else {
						if (v.selected) {
							return v;
						} else {
							return Object.assign({}, v, {
								selected: true,
								amount: diff > 0 ? diff : ''
							});
						}
					}
				});
			}
			this.calcPayment();
		},
		handlePaymentClick: function (p, pidx, e) {
			var _this = this;
			this.handlePaymentSelect(p);
			var $obj = $(e.currentTarget);
			setTimeout(function () {
				$obj.parent().find('input').focus().select();
			}, 50);
		},
		handlePaymentInputClick: function (p, pidx, e) {
			this.handlePaymentSelect(p);
			var $obj = $(e.currentTarget);
			setTimeout(function () {
				$obj.select();
			}, 50);
		},
		handlePaymentPress: function (p, pidx, e) {
			this.doSubmit();
		},
		handleToggleMul: function () {
			this.paymentMul = !this.paymentMul;
		},
		calcPayment: function () {
			var _this = this;
			var payments = _this.payment.filter(function (p) {
				return p.selected && p.amount;
			});
			var total = math.bignumber(this.modelData.Total);
			var totalDetail = math.bignumber(0);
			var i;
			for (i = 0; i < payments.length; i++) {
				totalDetail = totalDetail.add(math.bignumber(payments[i].amount || 0));
			}
			var diff = parseFloat(math.format(totalDetail.sub(total), { notation: 'fixed', precision: 2 }));
			var cashTypeIndex = _this.payment.findIndex(function (p) {
				/* eslint-disable eqeqeq */
				return p.value == _this.cashtype;
			});
			if (cashTypeIndex >= 0) {
				_this.payment.splice(cashTypeIndex, 1, Object.assign({}, _this.payment[cashTypeIndex], {
					tip: (_this.payment[cashTypeIndex].amount && diff > 0 && _this.payment[cashTypeIndex].amount > diff) ? "找零:" + diff : "",
				}));
			}
		},
		handlePaymentKeyup: function (p, pidx, e) {
			this.calcPayment();
			var _this = this;
			if (e.keyCode == 37 || e.keyCode == 38) {//ArrowLeft,ArrowUp
				if (pidx >= 1) {
					_this.handlePaymentSelect(_this.payment[pidx - 1]);
					setTimeout(function () {
						$('.partner-pay').find('.pay-item-icon')[pidx - 1].click();
					}, 50);
				}
			} else if (e.keyCode == 39 || e.keyCode == 40) {//ArrowRight,ArrowDown
				if (pidx < _this.payment.length - 1) {
					_this.handlePaymentSelect(_this.payment[pidx + 1]);
					setTimeout(function () {
						$('.partner-pay').find('.pay-item-icon')[pidx + 1].click();
					}, 50);
				}
			}
		},
		handlePaymentKeydown: function (p, pidx, e) {
			if (e.keyCode == 38 || e.keyCode == 40) {//ArrowUp,ArrowDown禁用
				e.preventDefault();
			}
		},
	},
	computed: {
		debug: function () {
			return /\/\/localhost|\/\/127.0.0.1/i.test(location.href) || /[?&]debug=true/.test(location.search);
		}
	},
	mounted() {
	},
	filters: {
	},
	template: '<div class="windLayerDiv partner-pay" style="display: none;" v-show="popVisible">\
		<table class="windLayerHeadingULine table100" cellpadding="3" cellspacing="0" >\
		<tr class="windLayerHeadingTr">\
			<td style="cursor: move;" class="windLayerHeading" align="left">\
				收银结账\
			</td>\
			<td align="right" style="width:35px;">\
				<input class="windLayerBtclose" type="button" title="关闭" @click.prevent="doCancel">&nbsp;&nbsp;\
			</td>\
		</tr>\
	</table>\
		<form class="validation-engine" :data-validate="vname">\
			<table style="background-color: rgb(234, 234, 234);width:100%;" class="small" border="0" cellpadding="3" cellspacing="1">\
            <tr bgcolor="white" height="25px;" style="">\
				<td class="windLayerTitle" style="text-align:right;width:20%;">\
					<span style="color:#f00;">*</span>合计应收\
				</td>\
				<td class="windLayerInfo" style="width:80%;padding:5px 10px;">\
					<input type="number" v-model="modelData.Total" @focus="handleFocusPrice($event)" readonly class="validate[required,custom[positive]]" style="font-weight:bold;line-height: 26px;font-size: 16px;" placeholder="请输入收款金额" />\
					<span v-if="paymentMul" @click="handleToggleMul" style="font-size: 14px;border-radius: 15px;background-color: rgb(0, 109, 204);color: #fff;line-height: 25px;display: inline-block;padding-right: 10px;padding-left: 10px;cursor: pointer;user-select: none;"><span style="">联合支付</span><i class="icon-circle" style="font-size: 14px;line-height: 25px;vertical-align: bottom;background: rgb(0, 109, 204);padding-left: 3px;"></i></span>\
					<span v-if="!paymentMul" @click="handleToggleMul" style="font-size: 14px;border-radius: 15px;background-color: #fff;border: 1px solid #D2D2D2;color: #999999;line-height: 25px;display: inline-block;padding-right: 10px;padding-left: 10px;cursor: pointer;user-select: none;"><i class="icon-circle" style="font-size: 14px;line-height: 25px;vertical-align: bottom;padding-right: 3px;color: #D2D2D2;"></i><span>联合支付</span></span>\
				</td>\
			</tr>\
			<tr bgcolor="white" height="25px;" style="">\
				<td class="windLayerTitle" style="text-align:right;">\
					<span style="color:#f00;">*</span>付款方式\
				</td>\
				<td class="windLayerInfo" style="padding-left:0;">\
					<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(20%, 1fr));padding-bottom: 5px;">\
							<div v-for="(p,pidx) in payment" style="vertical-align: top;"> <div style="display:flex;flex-direction: column;align-items:center;">\
									<div @click="handlePaymentClick(p,pidx,$event)" class="pay-item-icon" style="display:flex;flex-direction: column;width:88px;align-items: center;padding-bottom: 5px;cursor: pointer;margin: 5px 10px;border-radius: 5px;" :style="{\'border\':p.selected?\'1px solid #528CA0\':\'1px solid #ccc\',\'background-color\':p.selected?\'#FFFFDD\':\'#ffffff\'}"><img :src="p.img" style="width:25px;"/><div style="margin-top: -3px;">{{p.name}}</div></div>\
									<div style="text-align:center;"><input type="number" step="0.01" :readonly="!paymentMul&&p.value!=cashtype" autocomplete="off" @click="handlePaymentInputClick(p,pidx,$event)" @keypress.enter="handlePaymentPress(p,pidx,$event)" @keyup="handlePaymentKeyup(p,pidx,$event)" @keydown="handlePaymentKeydown(p,pidx,$event)" class="pay-item-input" :class="[p.value!=cashtype?\'validate[groupRequired[payments],custom[positive],max[\'+modelData.Total+\']]\':\'validate[groupRequired[payments],custom[positive]]\']" v-model="p.amount" style="font-weight:bold;line-height: 26px;font-size: 16px;width:80px;text-align:center;" placeholder="" /><span v-if="p.tip" style="font-size:16px;font-weight:bold;color:#41C060;display:block;">{{p.tip}}</span></div>\
							</div>\
					</div >\
				</td>\
			</tr>\
			<tr bgcolor="white" height="60px;">\
					<td colspan="2" align="center">\
						<button type="button" class="pure-button pure-button-edit" @click.prevent="handleSubmit($event)">\
							<i class="icon-check"></i>确定\
						</button>\
						&nbsp;&nbsp;&nbsp;&nbsp;\
						<button type="button" class="pure-button" @click.prevent="doCancel">\
							<i class="icon-reply"></i>取消\
						</button>\
						&nbsp;\
					</td>\
				</tr>\
			</table>\
		</form>\
		<div class="windLayerFoot">\
			&nbsp;\
	</div>\
		<div class="windLayerCorner">\
			&nbsp;\
	</div>\
</div>'
});